<template>
  <div class="top">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#3a3a3a"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <div class="center">
        <!-- 小核桃商标 -->
        <div class="xhtimg">
          <img @click="tohome" class="leftbox1image" src="@/assets/logo.png" />
        </div>
        <!-- 项目名称 -->
        <div class="inputindex">
          <el-input
            class="imgput"
            @input="chang"
            prefix-icon="el-icon-edit"
            v-model="inputs"
            placeholder="请输入内容"
          >
          </el-input>
        </div>
        <!-- 操作按钮 -->
        <div class="rightLeft">
          <div class="wbox">
            <el-button
              @click="webkitRequestFullscreen"
              plain
              round
              class="btns"
              type="primary"
              icon="el-icon-full-screen"
            >
              全屏模式
            </el-button>
          </div>
          <div class="wbox">
            <el-button
              @click="dialogVisibles = true"
              plain
              round
              class="btns"
              type="primary"
              icon="el-icon-folder-opened"
            >
              PPT管理
            </el-button>
          </div>
          <div class="wbox">
            <el-button
              type="primary"
              icon="el-icon-folder-opened"
              class="btns"
              plain
              round
              @click="conserve"
            >
              保存草稿
            </el-button>
          </div>
          <div class="wbox">
            <el-button
              type="primary"
              icon="el-icon-video-camera"
              round
              @click="dialogVisiblevideo = true"
            >
              生成视频
            </el-button>
          </div>
        </div>
        <!-- 名字/头像 -->
        <div class="nameavt">
          <div class="names">
            {{ user.user.username }}
          </div>
          <el-dropdown @command="handleClick">
            <span class="el-dropdown-link">
              <el-avatar :src="avatar"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="out">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-menu>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <!-- 上传ppt组件 -->
      <HelloWorld @pptupok="pptupok" />
    </el-dialog>
    <el-dialog
      top="5vh"
      title="ppt选择"
      :visible.sync="dialogVisibles"
      width="50%"
    >
      <div class="pptclickup">
        <div class="topbutton">
          <el-button type="primary" @click="dialogVisible = true"
            >上传PPT</el-button
          >
          <el-button type="primary" @click="emptypptimg">无需PPT</el-button>
        </div>
        <br />
        <div class="imageblocktop">
          <div v-for="item in list.list" :key="item.id" class="imageblock">
            <el-button @click="pptimg(item.uuidStr)" class="imageblockbutton">
              <el-image
                class="imageblockbutton"
                :src="url + item.basePath + item.uuidStr + '/images/1.png'"
              ></el-image>
            </el-button>
            <el-button
              class="delppt"
              type="danger"
              @click="pptdel(item.id)"
              size="mini"
              icon="el-icon-close"
              circle
            ></el-button>
            <div>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <pagination
          @pagination="paginations"
          :total="list.count"
          :currentPage4="list.pageIndex"
          :pagesize="list.pageSize"
        />
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="请选择视频质量"
      :visible.sync="dialogVisiblevideo"
      width="25%"
    >
      <div>
        <el-form :model="formInline" label-width="130px" label-position="left">
          <el-form-item label="视频质量：">
            <el-radio-group v-model="formInline.level">
              <el-radio :label="1">流畅</el-radio>
              <el-radio :label="2">蓝光</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="字幕：">
            <el-switch
              v-model="formInline.subtitle"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button v-if="isppts" type="primary" @click="compound"
              >合成</el-button
            >
            <el-button v-else type="primary" @click="compoundppt"
              >合成</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import HelloWorld from "@/components/HelloWorld.vue";
import { deletePpt } from "@/api/menulist";
import pagination from "@/components/pagination.vue";
export default {
  name: "MenuSa",
  components: { HelloWorld, pagination },
  props: ["list", "input"],
  data() {
    return {
      formInline: {
        level: this.$store.getters["virtualhuman/getlevel"],
        subtitle: this.$store.getters["virtualhuman/getsubtitle"]
      },
      avatar: this.$store.getters.avatar,
      url: this.$store.getters["url/urls"],
      dialogVisible: false,
      user: this.$store.getters.user,
      dialogVisibles: false,
      value: {},
      dialogVisiblevideo: false,
      isppts: true,
      inputs: this.input,
    };
  },
  watch: {
    "formInline.level"(val) {
      this.$store.commit("virtualhuman/SETLEVEL", val);
    },
    "formInline.subtitle"(val) {
      this.$store.commit("virtualhuman/SETSUBTITLE", val);
    },
    input() {
      this.inputs = JSON.parse(JSON.stringify(this.input));
    },
  },
  updated() {
    this.formInline.level = this.$store.getters["virtualhuman/getlevel"];
    this.formInline.subtitle = this.$store.getters["virtualhuman/getsubtitle"];
  },
  mounted() {},
  methods: {
    webkitRequestFullscreen() {
      document.documentElement.webkitRequestFullscreen();
    },
    //删除ppt
    pptdel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePpt({ PptId: id, source: 1 }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.$emit("pptlist");
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    chang(val) {
      this.$store.commit("virtualhuman/SETJSONNAME", val);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //选择空PPT
    emptypptimg() {
      this.$emit("emptypptimg");
      this.isppts = false;
      this.dialogVisibles = false;
    },
    pptimg(val) {
      //导出image
      this.$emit("pptimg", val);
      this.dialogVisibles = false;
      this.isppts = true;
    },
    //合成空PPT
    compoundppt() {
      this.$emit("emptycompound");
    },
    compound() {
      //合成
      this.$emit("compound");
    },
    canreferto() {
      //16:9
      this.$emit("canreferto");
    },
    refercanto() {
      //9:16
      this.$emit("refercanto");
    },
    conserve() {
      this.$emit("conserve");
    },
    pptupok(id) {
      //ppt上传成功
      this.dialogVisibles = false;
      this.dialogVisible = false;
      this.isppts = true;
      this.$emit("pptupok");
      this.$emit("pptimg", id);
    },
    tohome() {
      this.$store.commit("virtualhuman/REMOVEJSON");
      this.$router.push("/");
    },
    handleClick(val) {
      if (val === "out") {
        //登出
        this.logout().then(() => {
          this.$router.push("/login");
          this.$message({
            message: "登出",
            type: "success",
          });
        });
      }
    },
    pptlist() {
      this.$emit("pptlistarrsay");
    },
    paginations(val) {
      this.$emit("pptlist", val);
    },
    ...mapActions("user", ["logout"]),
  },
};
</script>

<style lang="scss"  scoped>
.imageblocktop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 50vh;
  .imageblock {
    position: relative;
    width: 300px;
    height: 168px;
    .imageblockbutton {
      width: 100%;
      height: 100%;
    }
    .delppt {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 999;
      display: none;
    }
    &:hover .delppt {
      display: block;
    }
  }
}
.top {
  height: 5vh;
  min-height: 45px;
  width: 100%;
  overflow: hidden;
  .center {
    height: 5vh;
    min-height: 45px;
    width: 100%;
    overflow: hidden;
    position: relative;
    .xhtimg {
      height: 5vh;
      min-height: 45px;
      position: absolute;
      top: 0;
      left: 0;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .inputindex {
      position: absolute;
      left: 40%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100%;
      .imgput {
        display: block;
      }
    }
    .rightLeft {
      position: absolute;
      top: 50%;
      transform: translate(0%, -40%);
      right: 7%;
      height: 100%;
      line-height: 100%;
      display: flex;
      .wbox {
        margin-right: 5px;
        .btns {
          background-color: #fff0;
        }
      }
    }
    .nameavt {
      position: absolute;
      right: 10px;
      top: 0px;
      display: flex;
      .names {
        color: #fff;
        height: 5vh;
        line-height: 5vh;
        width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
<style lang="scss">
.inputindex {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: 100px;
  height: 100%;
  .imgput {
    display: block;
    .el-input__inner {
      background-color: #fff0;
      color: #fff;
      border: none;
    }
  }
}
</style>